<template>
<div class="app-container bg-white" v-loading="loading">
  <div class="page-header"></div>
  <div class="page-body" v-if="settingData">
    <el-form ref="form" :model="settingData" label-width="150px">
      <div class="font-size--xs font-weight--lg">分佣设置</div>

      <el-form-item>
        <template slot="label">
          <el-popover placement="top" width="295" trigger="hover" content="至少需勾选一项，最少满足其中一项条件就可以升级">
            <span class="font-weight--lg">业绩归属</span><br>
            <span>最多只能两个角色获利</span><br>
            <span class="font-weight--lg margin_top_10">计算方式</span><br>
            <span>商品佣金=实收金额×佣金比率</span>
              <i slot="reference" class="el-icon-question text-brand pointer my_icon"></i>
          </el-popover>
          <span>业绩归属：</span>
        </template>
        <!-- <el-checkbox v-model="settingData.shareCommission"  name="type">
          <span class="margin_right_10">商户获利</span>
          <span v-if="settingData.shareCommission == 1">
            <el-input-number controls-position="right" v-model.trim="settingData.ordinaryRatio" placeholder="请输入获利奖励" :precision="0" :step="0.1" :min="0" :max="100"></el-input-number>
            <span class="margin_left_10">% 用户下单后获利</span>
          </span>
        </el-checkbox> -->
        <el-checkbox v-model="settingData.shareCommission"  name="type">分享客获利</el-checkbox>
        <el-checkbox v-model="settingData.inviteCommission" name="type">邀请人获利</el-checkbox>
      </el-form-item>

      <el-form-item label="分佣比率：">
        <el-radio-group v-model="settingData.commissionNode">
          <el-radio :label="1">订单完成关闭</el-radio>
          <el-radio :label="2">
            <span class="margin_right_10">订单完成关闭 +</span>
            <el-input-number controls-position="right" v-model.trim="settingData.days" placeholder="大于0的正整数" :precision="0" :step="1" :min="0" :max="99"></el-input-number>
            <span class="margin_left_10">天</span>
          </el-radio>
          <el-radio :label="3">
            <span>固定分账时间</span>
            <span v-if="settingData.commissionNode == '3'" class="fixedAccount">
              <span class="margin_right_10">固定分账时间：每月</span>
              <el-input-number controls-position="right" v-model.trim="settingData.days" placeholder="大于0的正整数" :precision="0" :step="1" :min="6" :max="24"></el-input-number>
              <span class="margin_left_10">号统一分账上月实际到账金额（请不要选择25号至次月5号）</span>
            </span>
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="普通用户是否获利：">
        <el-radio-group v-model="settingData.ordinaryCommission">
          <el-radio :label="1">
            <span class="margin_right_10">是</span>
            <span v-if="settingData.ordinaryCommission == 1">
              <el-input-number controls-position="right" v-model.trim="settingData.ordinaryRatio" placeholder="请输入获利奖励" :precision="0" :step="0.1" :min="0" :max="100"></el-input-number>
              <span class="margin_left_10">% 用户下单后才获利</span>
            </span>
          </el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <el-form-item label="商户结算方式：">
        <el-radio-group v-model="settingData.ordinaryComm">
          <el-radio :label="1">
            <span class="margin_right_10">系统自动</span>
            <span v-if="settingData.ordinaryComm == 1">
              <span class="margin_right_10">每月</span>
              <el-input-number controls-position="right" v-model.trim="settingData.ordinaryRa" placeholder="请输入获利奖励" :precision="0" :step="0.1" :min="0" :max="100"></el-input-number>
              <span class="margin_left_10">号统一总算上月实际到账金额</span>
            </span>
          </el-radio>
          <el-radio :label="0">商户申请</el-radio>
        </el-radio-group>
      </el-form-item> -->
    </el-form>
  </div>

  <div class="page-footer"></div>

  <div class="footer bg-white flex flex-center align-center">
      <el-button>取消</el-button>
      <el-button type="primary" @click="onSubmit()">保存</el-button>
  </div>
</div>
</template>
<script>
  import { GetSharedSettings, SaveSharedSettings } from '@/views/shared-management/services/index';
  export default {
    data() {
      return {
        tableData: [],
        loading: false,
        settingData: null
      }
    },
    methods: {
      onSubmit() {
        const settingData = JSON.parse(JSON.stringify(this.settingData));
        settingData.shareCommission = this.settingData.shareCommission ? 1 : 0;
        settingData.inviteCommission = this.settingData.inviteCommission ? 1 : 0;

        SaveSharedSettings(settingData)
        .then(data => {
          if(data.code  == 200){
            this.$message.success('保存成功');
            this.getDefaultSetting();
          }
        })
      },
      getDefaultSetting() {
        this.loading = true;
        GetSharedSettings()
        .then(data => {
          if (data.code == 200) {
            data.data.shareCommission = data.data.shareCommission == 1;
            data.data.inviteCommission = data.data.inviteCommission == 1;
            this.settingData = data.data;
          } else {
            this.$message.error('默认设置获取失败!');
          }
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        })
      }
    },
    created() {
      this.getDefaultSetting();
    }
  }
</script>
<style lang="scss" scoped>
.content {
    padding-left: 50px;
}

.my_icon {
    top: 3px;
    left: 30px;
}

.footer {
    width: 100%;
    height: 85px;
    line-height: 85px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 110;
    box-shadow: 0px -6px 10px 0px rgba(0,0,0,0.03);
}
</style>
